import BuildForm from '@/components/BuildForm/BuildForm';
import FormattedMessageCustom from '@/components/FormattedMessageCustom/FormattedMessageCustom';
import VipPopup from '@/components/VipPopup/VipPopup';
import { CONFIG } from '@/constants';
import { mapForm } from '@/pages/order/buildFormItems';
import { getIconList } from '@/servers/api/base';
import { createIconAuth } from '@/servers/api/userController';
import { formFormat } from '@/utils';
import { getLocale, history, useIntl, useModel } from '@umijs/max';
import { Button, Flex, Modal, Space, Spin, Typography, message } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { icon } from './icon';
import './icon.less';

const NewsForm: React.FC = () => {
    const { Title, Text } = Typography;
    const { initialState } = useModel('@@initialState');
    const { authModal } = useModel('useUser');
    const { auth, isAuthName } = initialState as IGlobal.IInitialState;
    const lang = getLocale();
    const intl = useIntl();
    const formItems = useRef();
    const [form, setForm] = useState();
    const [iconList, setIconList] = useState();
    const [loading, setloading] = useState(false);
    const [rect, setrect] = useState();
    const [show, setShow] = useState(false);
    const [iconId, setIconId] = useState();
    const [vipShow, setvipShow] = useState(false);
    function onFinish(val: IBuildForm.IDefault) {
        if (!iconId) {
            message.error(intl.formatMessage({ id: '请选择您需要的认证服务' }));
            return;
        }
        const params = formFormat(val, formItems.current);
        setloading(true);
        createIconAuth({
            ...params,
            icon_id: iconId,
        })
            .then(() => {
                setloading(false);
                message.success(
                    intl.formatMessage({ id: '发布成功，请等待后台审核' }),
                );
                history.push('/home');
            })
            .catch((err) => {
                message.error(err.msg);
                setloading(false);
            });
    }
    function isShow(item) {
        setrect(item[intl.formatMessage({ id: 'item.content' })]);
        if (lang === 'ru-RU') {
            setShow(true);
            setIconId(item.id);
        } else {
            if (item.is_vip === '1') {
                // 需要VIP
                if (!auth?.auth || auth?.auth.indexOf('icon') === -1) {
                    // 非会员不能提交
                    setvipShow(true);
                    // 弹出vip购买弹窗
                    return false;
                } else {
                    debugger
                    if (isAuthName?.status !== 2) {
                        authModal(
                            intl.formatMessage({ id: 'authText' }),
                            intl.formatMessage({ id: '立即认证' }),
                            intl.formatMessage({ id: '继续使用' }),
                        );
                        return false;
                    } else {
                        setShow(true);
                        setIconId(item.id);
                    }
                }
            } else {
                setShow(true);
                setIconId(item.id);
            }
        }
    }
    useEffect(() => {
        let temp = JSON.parse(JSON.stringify(icon));
        formItems.current = temp;
        mapForm(formItems.current, 0).then((res) => {
            setForm(res);
        });
        getIconList().then((res) => {
            setIconList(res.data);
            setrect(res.data[0][intl.formatMessage({ id: 'item.content' })]);
        });
    }, []);
    return (
        <Spin spinning={loading}>
            <Title level={5}>
                <FormattedMessageCustom id="请选择您需要的认证服务"></FormattedMessageCustom>
            </Title>
            <Flex
                justify="space-between"
                align="center"
                style={{ margin: '30px 0' }}
            >
                <>
                    {iconList &&
                        iconList.map((item, index) => (
                            <div
                                key={index}
                                className={
                                    iconId === item.id
                                        ? 'iconBox active'
                                        : 'iconBox'
                                }
                                onClick={() => {
                                    isShow(item);
                                }}
                            >
                                <img
                                    src={CONFIG.IMAGE_URL + item.image}
                                    alt=""
                                />
                                <Title level={5}>
                                    {
                                        item[
                                            intl.formatMessage({
                                                id: 'item.title',
                                            })
                                        ]
                                    }
                                </Title>
                            </div>
                        ))}
                </>
            </Flex>
            <BuildForm
                formItems={formItems.current}
                value={form}
                onFinish={onFinish}
            >
                <Space>
                    <Button type="primary" htmlType="submit">
                        <FormattedMessageCustom id="发布"></FormattedMessageCustom>
                    </Button>
                </Space>
            </BuildForm>
            <VipPopup
                vipShow={vipShow}
                onChange={() => {
                    setvipShow(false);
                }}
            ></VipPopup>
            <Modal
                title={null}
                open={show}
                onCancel={() => {
                    setShow(false);
                }}
                cancelText={intl.formatMessage({ id: '已确认' })}
                okButtonProps={{ style: { display: 'none' } }}
            >
                <Title level={5}>
                    {intl.formatMessage({
                        id: '温馨提示',
                    })}
                </Title>
                <Text>{rect}</Text>
                <Title level={5}>
                    {intl.formatMessage({
                        id: '认证流程',
                    })}
                </Title>
                <Text>
                    1、
                    {intl.formatMessage({
                        id: '与客服联系，获取该图标认证所需信息',
                    })}
                </Text>
                <br />
                <Text>
                    2、
                    {intl.formatMessage({
                        id: '选择您需要的认证服务',
                    })}
                </Text>
                <br />
                <Text>
                    3、
                    {intl.formatMessage({
                        id: '填写该图标认证信息',
                    })}
                </Text>
                <br />
                <Text>
                    4、
                    {intl.formatMessage({
                        id: '详细资料可在详情中进行说明',
                    })}
                </Text>
            </Modal>
        </Spin>
    );
};
export default NewsForm;
